<template>
  <div class="built-in">
    <img src="@/assets/images/top.png" alt="">
    <div class="search-box">
      <el-input suffix-icon="el-icon-search" />
    </div>

    <ul class="menu">
      <li class="menu-item" :class="{'active': activeIndex === 1}" @click="activeIndex = 1">待办任务</li>
      <li class="menu-item" :class="{'active': activeIndex === 2}" @click="activeIndex = 2">已办任务</li>
    </ul>
    <div class="content">
      <ul>
        <li>
          <h3>{{ mainTitle }}</h3>
          <div v-if="currentType === 1">
            <div class="df">
              <p>{{ subTitle1.alias ? `${subTitle1.alias}：` : null }} {{ subTitle1.sampleData }}</p>
              <span :class="deadline.typeStr === '临期' ? 'bg-orange' : (deadline.typeStr === '超期' ? 'bg-red' : '')">{{ deadline.typeStr }}</span>
            </div>
            <div class="df">
              <p>{{ subTitle2.alias ? `${subTitle2.alias}：` : null }} {{ subTitle2.sampleData }}</p>
              <p><span class="c-red">{{ deadline.num }}</span>天</p>
            </div>
          </div>
          <div v-else-if="currentType === 2">
            <div>
              <p>{{ subTitle1.alias ? `${subTitle1.alias}：` : null }} {{ subTitle1.sampleData }}</p>
            </div>
            <div class="df">
              <p>{{ subTitle2.alias ? `${subTitle2.alias}：` : null }} {{ subTitle2.sampleData }}</p>
              <span :class="deadline.typeStr === '临期' ? 'bg-orange' : (deadline.typeStr === '超期' ? 'bg-red' : '')">{{ deadline.typeStr }}</span>
            </div>
            <div class="df">
              <p>{{ subTitle3.alias ? `${subTitle3.alias}：` : null }} {{ subTitle3.sampleData }}</p>
              <p><span class="c-red">{{ deadline.num }}</span>天</p>
            </div>
          </div>
          <div v-else-if="currentType === 3">
            <div class="df">
              <p>{{ subTitle1.alias ? `${subTitle1.alias}：` : null }} {{ subTitle1.sampleData }}</p>
              <span>{{ time.sampleData }}</span>
            </div>
          </div>
          <div v-else-if="currentType === 4">
            <div>
              <p>{{ subTitle1.alias ? `${subTitle1.alias}：` : null }} {{ subTitle1.sampleData }}</p>
            </div>
            <div class="df">
              <p>{{ subTitle2.alias ? `${subTitle2.alias}：` : null }} {{ subTitle2.sampleData }}</p>
              <span>{{ time.sampleData }}</span>
            </div>
          </div>
          <div v-else-if="currentType === 5">
            <div class="df center-flex">
              <span v-if="subTitle7 === 'remainderTime'" :class="deadline.typeStr === '临期' ? 'bg-orange' : (deadline.typeStr === '超期' ? 'bg-red' : '')">{{ deadline.typeStr }}</span>
              <span v-else>{{ subTitle7.alias ? `${subTitle7.alias}：` : null }} {{ subTitle7.sampleData }}</span>
              <span v-if="subTitle8 === 'remainderTime'" :class="deadline.typeStr === '临期' ? 'bg-orange' : (deadline.typeStr === '超期' ? 'bg-red' : '')">{{ deadline.typeStr }}</span>
              <span v-else>{{ subTitle8.alias ? `${subTitle8.alias}：` : null }} {{ subTitle8.sampleData }}</span>
              <span v-if="subTitle9 === 'remainderTime'" :class="deadline.typeStr === '临期' ? 'bg-orange' : (deadline.typeStr === '超期' ? 'bg-red' : '')">{{ deadline.typeStr }}</span>
              <span v-else>{{ subTitle9.alias ? `${subTitle9.alias}：` : null }} {{ subTitle9.sampleData }}</span>
            </div>
          </div>
        </li>
        <li>
          <h3>{{ mainTitle }}</h3>
          <div v-if="currentType === 1">
            <div class="df">
              <p>{{ subTitle1.alias ? `${subTitle1.alias}：` : null }} {{ subTitle1.sampleData }}</p>
              <span :class="deadline.typeStr === '临期' ? 'bg-orange' : (deadline.typeStr === '超期' ? 'bg-red' : '')">{{ deadline.typeStr }}</span>
            </div>
            <div class="df">
              <p>{{ subTitle2.alias ? `${subTitle2.alias}：` : null }} {{ subTitle2.sampleData }}</p>
              <p><span class="c-red">{{ deadline.num }}</span>天</p>
            </div>
          </div>
          <div v-else-if="currentType === 2">
            <div>
              <p>{{ subTitle1.alias ? `${subTitle1.alias}：` : null }} {{ subTitle1.sampleData }}</p>
            </div>
            <div class="df">
              <p>{{ subTitle2.alias ? `${subTitle2.alias}：` : null }} {{ subTitle2.sampleData }}</p>
              <span :class="deadline.typeStr === '临期' ? 'bg-orange' : (deadline.typeStr === '超期' ? 'bg-red' : '')">{{ deadline.typeStr }}</span>
            </div>
            <div class="df">
              <p>{{ subTitle3.alias ? `${subTitle3.alias}：` : null }} {{ subTitle3.sampleData }}</p>
              <p><span class="c-red">{{ deadline.num }}</span>天</p>
            </div>
          </div>
          <div v-else-if="currentType === 3">
            <div class="df">
              <p>{{ subTitle1.alias ? `${subTitle1.alias}：` : null }} {{ subTitle1.sampleData }}</p>
              <span>{{ time.sampleData }}</span>
            </div>
          </div>
          <div v-else-if="currentType === 4">
            <div>
              <p>{{ subTitle1.alias ? `${subTitle1.alias}：` : null }} {{ subTitle1.sampleData }}</p>
            </div>
            <div class="df">
              <p>{{ subTitle2.alias ? `${subTitle2.alias}：` : null }} {{ subTitle2.sampleData }}</p>
              <span>{{ time.sampleData }}</span>
            </div>
          </div>
          <div v-else-if="currentType === 5">
            <div class="df center-flex">
              <span v-if="subTitle7 === 'remainderTime'" :class="deadline.typeStr === '临期' ? 'bg-orange' : (deadline.typeStr === '超期' ? 'bg-red' : '')">{{ deadline.typeStr }}</span>
              <span v-else>{{ subTitle7.alias ? `${subTitle7.alias}：` : null }} {{ subTitle7.sampleData }}</span>
              <span v-if="subTitle8 === 'remainderTime'" :class="deadline.typeStr === '临期' ? 'bg-orange' : (deadline.typeStr === '超期' ? 'bg-red' : '')">{{ deadline.typeStr }}</span>
              <span v-else>{{ subTitle8.alias ? `${subTitle8.alias}：` : null }} {{ subTitle8.sampleData }}</span>
              <span v-if="subTitle9 === 'remainderTime'" :class="deadline.typeStr === '临期' ? 'bg-orange' : (deadline.typeStr === '超期' ? 'bg-red' : '')">{{ deadline.typeStr }}</span>
              <span v-else>{{ subTitle9.alias ? `${subTitle9.alias}：` : null }} {{ subTitle9.sampleData }}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'BuiltIn',
  props: {
    currentType: {
      type: Number,
      required: true,
      default: 1
    },
    styleEnums: {
      type: Array,
      required: true,
      default: () => [
        // {
        //   label: '主标题',
        //   value: 1,
        //   alias: '',
        //   fieldName: '',
        //   sampleData: ''
        // },
        // {
        //   label: '副标题1',
        //   value: 2
        // },
        // {
        //   label: '副标题2',
        //   value: 3
        // },
        // {
        //   label: '副标题3',
        //   value: 4
        // },
        // {
        //   label: '期限',
        //   value: 5
        // },
        // {
        //   label: '时间',
        //   value: 6
        // }
      ]
    }
  },
  data() {
    return { activeIndex: 1 }
  },
  computed: {
    mainTitle() {
      return this.styleEnums.find(item => item.value === 1)?.sampleData
    },
    subTitle1() {
      return this.styleEnums.find(item => item.value === 2) ? this.styleEnums.find(item => item.value === 2) : { alias: '', sampleData: '' }
    },
    subTitle2() {
      return this.styleEnums.find(item => item.value === 3) ? this.styleEnums.find(item => item.value === 3) : { alias: '', sampleData: '' }
    },
    subTitle3() {
      return this.styleEnums.find(item => item.value === 4) ? this.styleEnums.find(item => item.value === 4) : { alias: '', sampleData: '' }
    },
    subTitle7() {
      if (this.styleEnums.find(item => item.value === 7) && this.styleEnums.find(item => item.value === 7).fieldName === 'remainderTime') {
        return 'remainderTime'
      }
      return this.styleEnums.find(item => item.value === 7) ? this.styleEnums.find(item => item.value === 7) : { alias: '', sampleData: '' }
    },
    subTitle8() {
      if (this.styleEnums.find(item => item.value === 8) && this.styleEnums.find(item => item.value === 8).fieldName === 'remainderTime') {
        return 'remainderTime'
      }
      return this.styleEnums.find(item => item.value === 8) ? this.styleEnums.find(item => item.value === 8) : { alias: '', sampleData: '' }
    },
    subTitle9() {
      if (this.styleEnums.find(item => item.value === 9) && this.styleEnums.find(item => item.value === 9).fieldName === 'remainderTime') {
        return 'remainderTime'
      }
      return this.styleEnums.find(item => item.value === 9) ? this.styleEnums.find(item => item.value === 9) : { alias: '', sampleData: '' }
    },
    deadline() {
      const val = this.styleEnums.find(item => item.value === 5)?.sampleData || this.styleEnums.find(item => item.fieldName === 'remainderTime')?.sampleData
      let typeStr = ''
      if (val >= 0 && val <= 1) {
        typeStr = '临期'
      } else if (val < 0) {
        typeStr = '超期'
      }
      return { typeStr, num: val }
    },
    time() {
      return this.styleEnums.find(item => item.value === 6) ? this.styleEnums.find(item => item.value === 6) : { sampleData: '' }
    }
  }
}
</script>
<style lang="scss">
.built-in{
  margin-top: 15px;
  background-image: url('../../../assets/images/mobile.png');
  background-size: 100%;
  padding: 20px 25px 20px 19px;
  width: 380px;
  height: 740px;
  box-sizing: border-box;
  h3,p{margin: 0}

  >img{
    margin-top: 41px;
    width: 100%;
  }
  .search-box{
    padding: 15px 20px;
  }
  ul{
    list-style: none;
  }
  .menu{
    padding: 0 20px;
    .menu-item {
      display: inline-block;
      width: 50%;
      text-align: center;
      border: 1px solid rgb(238,238,238);
      box-sizing: border-box;
      padding: 5px;
      cursor: pointer;
      &.active{
        background-color: rgb(238,238,238);
      }
    }
  }
  .content{
    ul{
      padding: 0 20px;
    }
    .c-red{
      font-size: 14px;
      color: red;
    }
    .bg-orange{
      background-color: orange;
      padding: 1px 5px;
      color: #fff;
    }
    .bg-red{
      background-color: red;
      color: #fff;
      padding: 1px 5px;
    }
    .df{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    li{
      border-bottom: 1px solid rgb(215,215,215);
      padding-bottom: 3px;
    }
  }
  h3{
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 16px;
  }
  p,span{
    color: gray;
    font-size: 12px;
  }
}
</style>
